@()(implicit request: play.api.mvc.RequestHeader)
@main("Geographical Distribution") {

	<script src="@routes.Assets.at("javascripts/main.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("Highmaps-6.1.0/highmaps.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("Highmaps-6.1.0/exporting.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("Highmaps-6.1.0/data.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("Highmaps-6.1.0/world.js")" type="text/javascript"></script>

	<style>

			.radio, .checkbox {
				position: relative;
				display: block;
				margin-top: 5px;
				margin-bottom: 10px;
			}

			table img {
				vertical-align: middle;
			}

			table .myImgTd {
				text-align: center;
			}

			.fa-rotate-135 {
				-webkit-transform: rotate(135deg);
				-moz-transform: rotate(135deg);
				-ms-transform: rotate(135deg);
				-o-transform: rotate(135deg);
				transform: rotate(135deg);
			}

			.fa-rotate-45 {
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			.myGroup {
				margin-top: 15px;
				margin-left: 15px;
			}


	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Geographical Distribution</h2>
		</div>
	</div>

	<div id="content" style="display: block" >


		<div id="container" class="clearfix">
			<div id="content" class="full-width">
				<div class="tabs-container" style="padding: 10px">
					<div id="worldmap" style="height: 650px;"></div>

					<div >

						<div id="tableResult" style="display: none">

							<label>Select the columns to display:</label>
							<div id="checkbox" class="checkbox"></div>

							<div style="display: none;
								margin-bottom: 10px">Filtering and sort：
								<span id="filterCondition">

									<span class="eachFilterCondition" style="display: none">
										<span >Gene ID</span>
										<span style="color: red">LIKE</span>
										AT
										<sup style="" class="mySup" onclick="SampleManage.removeCondition">
											<i class="fa fa-times-circle"></i>
										</sup>
									</span>

								</span>
							</div>

							<div style="display: none;
								margin-bottom: 10px">Sorting conditions：
								<span id="sortCondition">

									<span class="eachFilterCondition" style="display: block">
										<span >Gene ID ,</span>
										<span style="color: red">Ascending sort</span>
										<sup style="" class="mySup" onclick="SampleManage.removeCondition">
											<i class="fa fa-times-circle"></i>
										</sup>
									</span>

								</span>
							</div>

							<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
							data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
							data-show-export="false" data-export-types="['excel','txt']" data-export-data-type="all"
							>

							</table>

							<div id="allFilterContent">

							</div>

						</div>

					</div>

				</div>
			</div>
		</div>


	</div>


	<script>



			$(function () {

				GeoMap.init

			})
	</script>


}
